<style>
  .container {
    position: relative;
  }
  .item {
    position: absolute;
    width: 200px;
    height: 200px;
    transition: box-shadow ease-in 0.2s;
    display: inline-block;
  }
  .green {
    background-color: greenyellow;
    top: 100px;
    left: 300px;
  }
  .red {
    background-color: palevioletred;
    top: 200px;
    left: 150px;
  }
  .hover {
    box-shadow: 0 0 44px -10px inset #333;
  }
</style>
<body class="container">
  <!-- <input disabled class="item green" type="text" />
  <input disabled class="item red" /> -->

  <div class="item green"></div>
  <div class="item red"></div>
</body>
<script>
  /** @type {HTMLElement} */
  const div = document.querySelector('.green');
  const delay = 100;
  function setHover() {
    setTimeout(() => {
      console.log('set');
      this.classList.add('hover');
    }, delay);
  }
  function removeHover() {
    setTimeout(() => {
      console.log('remove');
      this.classList.remove('hover');
    }, delay);
  }

  div.onmouseenter = setHover;
  div.onmouseleave = removeHover;
</script>
